<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<style>
			*{
		        padding:0px;
	            margin:0px;
		    }
			body{
				font-size:16px !important;
			
				
			}
	         .clearfix{
				clear:both;
				display:table;
				content:"";
			}
			.fl{
				float:left;
				}
			.fr{
				float:right;
				}
			.var_bottom{
			   width:100%;  
			   height:1.5rem;
			   border-top:0.5px  solid #ccc;
			   position:fixed;
			   left:0px;
			   bottom:0px;
			   background:white; 
			}
			 .var_bottom>div{
			  float:left;
			  width:25%;
			  text-align:center;
			  padding-top:.8rem;
			  background:url("./images/liuhui01/xiazai.png") no-repeat center .2rem;
			  background-size:25%;
			} 
			 .var_bottom>div:nth-of-type(1){
			background-image:url(./images/liuhui01/xiazai.png);
			}
					 
			.var_bottom>div:nth-of-type(2){
				background-image:url(./images/liuhui01/lianxi.png);
			}
			.var_bottom>div:nth-of-type(3){
			  	background-image:url(./images/liuhui01/pingjia_a.png);
			  }
			 .var_bottom>div:nth-of-type(4){
				background-image:url(./images/liuhui01/tixing.png);
			}
			.var_bottom a{
			color:#666;
			}
			.top1{
				width:100%;
				height:4rem;
				background-image:url(./images/liuhui01/bg.png); 
				filter: blur(0.066666rem);
				background-size:cover;
				
			}
		
			
			.top{
				width:100%;
				height:2.666666rem;
			   position:absolute;
			   top:0px;
			   left:0px;
			}
			.top_var{
				width:100%;
				height:0.8rem;
				background:url(./images/liuhui01/h_return_01.png) no-repeat 2% center,url(./images/liuhui01/h_more01.png)no-repeat 96% center;
			background-size:5%;
			position:absolute;
			}
			.top h3{
			          color:white;
					  position:absolute;
					  top:1.6rem;
					  left:0.6rem;
					  font-size:20px;
					  height:0.8rem;
					  line-height:0.8rem;	
			}
			.top span{
				color:white;
				position:absolute;
				top:2.666666rem;
				 left:0.6rem;
			}
			.section{
				
			}
			.sec_var{
				width:100%;
				height:2.133333rem;
				border-radius:0.2rem 0.2rem 0 0;
				background-color:#e8e8e8;
				
				margin-bottom:0.4rem;
			}
			.pinfen{
				width:40%;
				color:orange;
				height:2.133333rem;
				line-height:2.133333rem;
				font-size:40px;
				font-weight:700;
				padding-left:0.266666rem;
				box-sizing:border-box;
				
			}
			.iteam{
				width:20%;
				height:0.4rem;
				line-height:0.4rem;
				padding-top:0.666666rem;
				box-sizing:border-box;
			}
			.iteam p{
				height:0.533333rem;
				line-height:0.533333rem;
			}
			.pic{
			     width:25%;
			     padding:10px;
			     box-sizing:border-box;
			    }
			.right{
			        width:70%;
			        padding:5px;
			        box-sizing:border-box;
			    }
			.pic{
				       width:25%;
				      height:50px;
				      background:url(./images/liuhui01/touxiang.jpg) no-repeat 0.666666rem 0.133333rem;
				      background-size:50%;
				      border-radius:4px;
				      box-sizing:border-box;
				       }
					   
			
	         .pname {
				 background:url(./images/liuhui01/haopin.png) no-repeat 99% center;
				  background-size:8%;
			 }
		    .pname a{
		               text-decoration:none;
		               font-weight:700;
		               color:black;
		              /* padding:2px;
		               box-sizing:border-box; */
		               }
	         .pname span{
				 color:#ccc;
				 font-size:10px;
				 
			 }
			 .p_iteam {
				 width:100%;
				 height:2.666666rem;
				 
			 }
			 .ptext{
				 font-size:14px;
			 }
			 .pic1{
			 	  background:url(./images/liuhui01/touxiang5.jpg) no-repeat 0.666666rem 0.133333rem;
		          background-size:50%;
			 }
			 .pic2{
				 background:url(./images/liuhui01/touxiang2.jpg) no-repeat 0.666666rem 0.133333rem;
				 background-size:50%;
			 }
			  .pic3{
				  background:url(./images/liuhui01/touxiang3.jpg) no-repeat 0.666666rem 0.133333rem;
				  background-size:50%;
			  }
			.pic4{
			       background:url(./images/liuhui01/touxiang4.jpg) no-repeat 0.666666rem 0.133333rem;
			       background-size:50%;
			}
			.pinlun{
				margin-bottom:1.333333rem;
			}
		</style>
	</head>
	<body>
	<div class="all">
		<div class="top1"></div>
		<div class="top">
			<div class="top_var"></div>
			<h3>初识HTML(5)+CSS(3)-2020 升级版 </h3>
			<span>免费课 入门9小时18分 -1130812人学-9.5分</span>
		</div>
	     <div class="section">
			<div class="sec_var clearfix">
				<div class="pinfen fl">
					10.00
				</div>
				<div class="iteam fl">
					<p>内容实用</p>
					  <p>10.00</p>
				</div>
				<div class="iteam fl">
					<p>通俗易懂</p>
					 <p>10.00</p>
				</div>
				<div class="iteam fl">
					<p>逻辑清晰</p>
					 <p>10.00</p>
				</div>	
			</div> 
			<div class="pinlun">
			    <div class="p_iteam">
				      <div class="pic fl">
				      </div>
				      <div class="right fl">
				        <div class="pname">
				          <a href="#"><p>匿名用户</p></a>
					      <span>1天前</span>
				        </div>
				        <div class="ptext">
				            看了字节码文件部分，参考虚拟机部分。
				        </div>	
			         </div>
			    </div>
				<div class="p_iteam">
				      <div class="pic pic1 fl">
				           
				      </div>
				      <div class="right fl">
				        <div class="pname">
				          <a href="#"><p>匿名用户</p></a>
					      <span>1天前</span>
				        </div>
				        <div class="ptext">
				            看了字节码文件部分，参考虚拟机部分。
				        </div>	
				     </div>
				</div>
				<div class="p_iteam">
				      <div class="pic pic2 fl">
				         
				      </div>
				      <div class="right fl">
				        <div class="pname">
				          <a href="#"><p>匿名用户</p></a>
					      <span>1天前</span>
				        </div>
				        <div class="ptext">
				            一门提升内功的课程，老师讲的条理清晰，何必多细节都很受用！
				        </div>	
				     </div>
				</div>
				<div class="p_iteam">
				      <div class="pic pic3 fl">
				       
				      </div>
				      <div class="right fl">
				        <div class="pname">
				          <a href="#"><p>匿名用户</p></a>
					      <span>1天前</span>
				        </div>
				        <div class="ptext">
				            看了字节码文件部分，参考虚拟机部分。
				        </div>	
				     </div>
				</div>
				<div class="p_iteam">
				      <div class="pic pic4 fl">
				      </div>
				      <div class="right fl">
				        <div class="pname">
				          <a href="#"><p>匿名用户</p></a>
					      <span>1天前</span>
				        </div>
				        <div class="ptext">
				            看了字节码文件部分，参考虚拟机部分。
				        </div>	
				     </div>
				</div>
			</div>
			
			
		</div>
		<div class="var_bottom"><!--尾部-->
				<div >
					<a href="xiazai.html">下载</a>
				</div>
				<div>
					<a href="lianxilaoshi.html">联系老师</a>
				</div>
				<div class="active" >
					<a href="pinjia.html">评价</a>
				</div>
				<div>
					<a href="tixin">提醒已关</a>
				</div>
		</div>	
    </div>	
	</body>
</html>
